<script setup>
// 导入axios函数
import axios  from "axios";
import { ref } from 'vue'
// 导入emp.js
import {empGetAllService} from "./api/emp.js";
import {Delete, Edit} from "@element-plus/icons-vue";
const emps = ref([])
// 获取所有员工信息
const getAllEmp=async function(){
  let data = await empGetAllService()
  emps.value = data
}
// 手动调用
getAllEmp()
</script>

<template>
  <h2>员工信息表</h2>
  <el-table :data="emps" style="width: 100%" >
    <el-table-column prop="id" label="ID" width="70"></el-table-column>
    <el-table-column prop="username" label="用户名" width="170"></el-table-column>
    <el-table-column prop="password" label="密码"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="gender" label="性别" width="70"></el-table-column>
    <el-table-column prop="image" label="图像"></el-table-column>
    <el-table-column prop="job" label="职位"></el-table-column>
    <el-table-column prop="entrydate" label="入职时间" width="170"></el-table-column>
    <el-table-column prop="deptId" label="部门ID"></el-table-column>
    <el-table-column label="操作" width="170">
      <template #default="scope">
        <div class="operation-cell">
          <el-button type="warning" size="small" :icon="Edit">编辑</el-button>
          <el-button type="danger" size="small" :icon="Delete">删除</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

.el-button {
  margin-right: 10px;
}

/* 使用类名控制表格操作列的布局 */
.operation-cell {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: start; /* 水平左对齐 */
  height: 100%;
}
.operation-cell .el-button {
  min-width: 50px;
}
</style>
